<template>
  <div id="app">
    <Suspense>
      <template #default>
        <router-view />
      </template>
      <template #fallback>
        <LoadingSpinner text="页面加载中..." />
      </template>
    </Suspense>
    
    <!-- 全局加载组件 -->
    <GlobalLoading
      :visible="loadingStore?.value?.globalLoading || false"
      :title="loadingStore?.value?.loadingTitle || ''"
      :subtitle="loadingStore?.value?.loadingSubtitle || ''"
      :progress="loadingStore?.value?.loadingProgress || 0"
      :show-progress="loadingStore?.value?.showProgress || false"
      :animation-type="loadingStore?.value?.animationType || 'default'"
      :tips="loadingStore?.value?.loadingTips || []"
      :show-cancel="loadingStore?.value?.showCancel || false"
      :background="loadingStore?.value?.background || 'rgba(0,0,0,0.5)'"
      @cancel="handleLoadingCancel"
    />
    
    <!-- PWA状态组件 -->
    <PWAStatus 
      :show-connection-info="true"
      :auto-hide-install="true"
      :install-prompt-delay="5000"
    />
  </div>
</template>

<script setup>
import { onMounted, onErrorCaptured, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from './stores/user'
import { useLoadingStore } from './stores/loading'
import LoadingSpinner from './components/LoadingSpinner.vue'
import ErrorBoundary from './components/ErrorBoundary.vue'
import GlobalLoading from './components/GlobalLoading.vue'
import PWAStatus from './components/PWAStatus.vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
// 使用响应式ref来存储store，避免在Pinia初始化前调用
const userStore = ref(null)
const loadingStore = ref(null)

onMounted(() => {
  // 在onMounted中初始化store，确保Pinia已经初始化
  userStore.value = useUserStore()
  loadingStore.value = useLoadingStore()
  
  // 初始化用户数据
  userStore.value.initializeUser()
  
  // 检查当前路由，如果是根路径则重定向到适当页面
  if (router.currentRoute.value.path === '/') {
    if (userStore.value.isLoggedIn) {
      // Dashboard组件的路径是'/'，不需要重定向
      // router.push('/dashboard')
    } else {
      router.push('/login')
    }
  }
})

// 全局错误处理已移至ErrorBoundary组件

// 处理加载取消
function handleLoadingCancel() {
  if (loadingStore.value) {
    loadingStore.value.hideGlobalLoading()
    ElMessage.info('操作已取消')
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
  background: #f5f7fa;
}

body {
  margin: 0;
  padding: 0;
  background: #f5f7fa;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 全局过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}

/* 响应式断点 */
@media (max-width: 768px) {
  #app {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #app {
    font-size: 13px;
  }
}
</style>
